<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pro{
            width: 100%;
            float:left;
        }
        #pro>div{
            float:left;
            width: 110px;
            height: 80px;
            border: #1a2226 double 1px;
            margin: 30px 20px;
            background-color: pink;
            text-align: center;
            padding-top: 30px;
        }
    </style>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">

    <script src="public/libs/jquery.min.js"></script>
    <script type="text/javascript">
            var array = ["众筹平台","伴我汽车","IT培训机构官网","婚纱摄影公司","小说网站","老王博客","航道局管理系统","房地产","美容医院","医疗器械租赁"];
            var result = [];
            $(function(){
                for(let i = 0;i<array.length;i++){
                   let $div =  $("<div>");
                   $div.attr("id",i);
                   $div.html(array[i]);

                   $("#pro").append($div);
                }

                var index = 0;
                var interval = null;
                $("#start").click(function(){
                    interval =  setInterval(function(){
                        if(result.length>=10){
                            alert('10个小组项目分发完毕！！');
                           return ;
                        }
                        $("#"+index).css("background-color","pink");
                        let num = Math.floor(Math.random()*10);
                        if(result.indexOf(num)<0){
                            index = num;
                            $("#"+num).css("background-color","gray");
                        }

                    },100);
                });

                $("#stop").click(function(){
                    clearInterval(interval);
                    var $h1 = $("<h3>");
                    if(result.indexOf(index)<0){
                        result.push(index);
                    }

                    $h1.html("第"+result.length+"小组的项目是："+array[index]);
                    $("#result").append($h1);

                });
            });


    </script>
</head>
<body>

    <div id="pro">

    </div>
    <br>
    <hr>

    <div style="text-align: center">
        <button id="start" class="btn btn-success">开始</button>
        <button id="stop" class="btn btn-danger">停止</button>
    </div>

    <div id="result">


    </div>

</body>
</html>